<template>
  <div class="safe-resize-wrapper">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'SafeResizeWrapper',
  props: {
    // 可以传入标识符，用于日志
    identifier: {
      type: String,
      default: 'unknown'
    }
  },
  data() {
    return {
      observer: null
    }
  },
  methods: {
    // 创建安全的ResizeObserver
    createSafeObserver() {
      try {
        // 如果已存在，先销毁
        if (this.observer) {
          this.observer.disconnect();
          this.observer = null;
        }
        
        // 创建新的observer使用更安全的方式
        this.observer = new ResizeObserver((entries) => {
          // 使用requestIdleCallback如果可用，否则使用requestAnimationFrame
          if (window.requestIdleCallback) {
            window.requestIdleCallback(() => this.handleResize(entries), { timeout: 100 });
          } else {
            requestAnimationFrame(() => this.handleResize(entries));
          }
        });
        
        // 观察容器，但使用try-catch确保错误不会影响用户界面
        const container = this.$el;
        if (container) {
          try {
            this.observer.observe(container);
          } catch (err) {
            console.warn(`SafeResizeWrapper(${this.identifier}): Failed to observe:`, err);
          }
        }
      } catch (error) {
        console.warn('Failed to create ResizeObserver:', error);
      }
    },
    
    // 处理Resize事件的方法
    handleResize(entries) {
      if (!Array.isArray(entries) || !entries.length) {
        return;
      }
      
      // 仅日志记录，无需其他操作
      if (this.identifier !== 'unknown') {
        console.log(`SafeResizeWrapper(${this.identifier}): Size changed`);
      }
    }
  },
  mounted() {
    // 延迟创建observer，避免与其他组件冲突
    setTimeout(() => {
      this.createSafeObserver();
    }, 100);
  },
  beforeUnmount() {
    // 确保在组件销毁时断开连接
    if (this.observer) {
      try {
        this.observer.disconnect();
      } catch (e) {
        console.warn('Error disconnecting observer:', e);
      }
      this.observer = null;
    }
  }
}
</script>

<style scoped>
.safe-resize-wrapper {
  /* 确保内容可以正确流动 */
  width: 100%;
  position: relative;
  /* 硬件加速选项可能会影响某些事件，让我们移除这些 */
  /* transform: translateZ(0); */
  /* will-change: transform; */
}
</style> 